<template>
  <div class="reply">
    <div class="goback" @click="$router.go(-1)">
      <span>《返回</span>
    </div>
    <div class="descript">
      <div class="rent">
        <img :src="list.head_pic" alt="">
        <div class="content">
          <div class="nick-name">
            <span class="texts" v-html="list.nickname"></span>
            <span class="sex-icon"></span>
          </div>
          <div class="address">
            <span class="texts">{{list.areas_name}}</span>
            <!--<span class="time">{{list.create_time*1000 | dateFmt(('YYYY-MM-DD HH:mm:ss'))}}</span>-->
            <span>2017.11.22</span>
          </div>
        </div>
      </div>
      <div class="desc-pic clearfix">
        <div class="desc">
          {{list.content}}
        </div>
        <div class="pic_img">
          <div v-for="(item,index) in list.img" :key="index" class="img_li">
            <img class="img_img preview-img" v-lazy="item" alt="" @click="preview(index)">
          </div>
        </div>
      </div>
    </div>
    <div class="pinglun" @click="goComment()">
      <span>点击此处评论</span>
    </div>
    <ol class="main">
      <li class="desc" v-for="(lis,index) in lists" :key="index">
        <img :src='lis.head_pic'>
        <div class="content">
          <div class="nick-name">
            <span class="txt">{{lis.nickname}}</span>
            <span class="sex-icon"></span>
          </div>
          <div class="address">
            <span class="txt">杭州</span>
            <span class="time">2017-11-22</span>
          </div>
        </div>
        <span class="comment-icon" @click="goReply()">回</span>
        <p class="ask" v-if="lis.to_uid">
          <span>回复：{{lis.to_name}}</span>
          {{lis.content}}
        </p>
        <p class="ask" v-else>
          <!--<p class="ask">-->
          <span></span>
          {{lis.content}}
        </p>
        <!--回复-->
        <mt-popup
          v-model="replyShow"
          popup-transition="popup-fade">
          <div class="box">
            <mt-field class="msgbox" placeholder="回复..." type="textarea" rows="4" v-model="msgReply"></mt-field>
            <button>
              <span>发送</span>
            </button>
          </div>
        </mt-popup>
      </li>
    </ol>
    <!--写评论-->
    <mt-popup
      v-model="commentShow"
      popup-transition="popup-fade">
      <div class="box">
        <mt-field class="msgbox" placeholder="我来说两句..." type="textarea" rows="4" v-model="msgDetail"></mt-field>
        <button @click="sendComment()">
          <span>发送</span>
        </button>
      </div>
    </mt-popup>
  </div>
</template>
<style lang="scss">
  .reply {
    width: 100%;
    padding-bottom: 20%;
    .goback {
      width: 100%;
      height: 44px;
      background: orange;
      span {
        line-height: 44px;
        color: #fff;
        font-size: 15px;
      }
    }
    .descript {
      padding-bottom: 60%;
      .rent {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgb(217, 217, 217);
        img {
          width: 40px;
          height: 40px;
          margin-right: 12px;
          border-radius: 50%;
          vertical-align: middle;
        }
        .content {
          display: inline-block;
          text-align: left;
          vertical-align: middle;
          .nick-name {
            margin-bottom: 13px;
          }
          .address {
            color: rgb(153, 153, 153);
          }
        }
      }
      .desc-pic {
        padding: 10px;
        .desc {
          line-height: 16px;
        }
        .pic_img {
          width: 100%;
          .img_li {
            width: 24%;
            height: 120px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            img {
              width: 100%;
              height: 120px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
    .pinglun {
      width: 100%;
      height: 40px;
      background: orangered;
      span {
        line-height: 40px;
        color: #fff;
        font-size: 15px;
        float: right;
        margin-right: 10px;
      }
    }
    .main {
      .desc {
        padding-top: 15px;
        margin: 0 10px;
        padding-bottom: 17px;
        border-bottom: 1px solid rgb(217, 217, 217);
        img {
          width: 40px;
          height: 40px;
          margin-right: 12px;
          border-radius: 50%;
          vertical-align: middle;
        }
        .content {
          display: inline-block;
          text-align: left;
          vertical-align: middle;
          .nick-name {
            margin-bottom: 13px;
          }
          .address {
            color: rgb(153, 153, 153);
          }
        }
        .comment-icon {
          float: right;
          width: 11px;
          height: 10px;
          background-size: 11px 10px;
          background-repeat: no-repeat;
          vertical-align: middle;
        }
        .ask {
          margin-top: 21px;
          padding-left: 50px;
          font-size: 13px;
          span {
            color: #20a0ff;
            font-size: 14px;
          }
        }
      }
    }
    .box {
      width: 100%;
      height: 160px;
      text-align: center;
      .msgbox {
        border-bottom: 1px solid #d7d7d7;
      }
      button {
        outline: none;
        padding: 5px 10px 5px 10px;
        background: #20a0ff;
        margin-top: 7px;
        width: 50px;
        height: 30px;
        span {
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }
</style>
<script>
  import qs from 'qs'
  import wx from 'weixin-js-sdk'
  export default {
    name: 'Reply',
    data() {
      return {
        commentShow: false,
        replyShow: false,
        msgDetail: '',
        msgReply: '',
        reId: {
          type: Number
        },
        lists: [],
        list: {}
      }
    },
    created() {
      this.getMessage()
      //初始化微信图片预览的请求
      const url = 'https://ynwx.zgwyzxw.cn/index.php/wx/wx_jssdk/getSignPackage'
      let data = {
        url: window.location.href
      }
      this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
        if (res.data.code === 200) {
          wx.config({
            debug: false,
            appId: res.data.data.appId,
            nonceStr: res.data.data.nonceStr,
            rawString: res.data.data.rawString,
            signature: res.data.data.signature,
            timestamp: res.data.data.timestamp,
            jsApiList: ['previewImage']
          })
        }
      })
    },
    methods: {
      // 获取论坛列表的地址
      getMessage() {
        const url = `https://ynwx.zgwyzxw.cn/index.php/home/forum/getComments/?id=${this.$route.params.id}`
        this.$http.get(url).then(res => {
//          console.log(res)
          if (res.data.code === 200) {
            this.lists = res.data.data.comment
            this.list = res.data.data.house
            // console.log(this.lists)
          }
        })
      },
      goComment() {
        this.commentShow = true
      },
      /* goReply (id) {
         this.replyShow = true
         this.reId = id
         console.log(id)*/
      goReply() {
        this.replyShow = true
      },
//      发表评论
      sendComment() {
//        alert('评论')
        const url = 'https://ynwx.zgwyzxw.cn/index.php/home/forum/addcomment'
        const data = {
          content: this.msgDetail,
          id:this.list.id
//           related_id: this.list.id,
//           comment_type: this.list.comment_type,
//           id: '',
//           openid: 'oHVoI1YFA6zvN1ymtrO4WrrRrmzA'
          //          openid: loadOpenId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            //            刷新页面
            window.location.reload()
            alert(res.data.data)
            this.commentShow = false
          } else {
            alert('评论发送失败')
          }
        })
      },
//      回复
      sendReply() {
        alert('回复')
        /* console.log(this.reId)
         const url = `${commonUrl.apihost}index.php/home/comment/addcomment`
         const data = {
           content: this.msgReply,
           related_id: this.list.id,
           comment_type: this.list.comment_type,
           id: this.reId,
           openid: 'oHVoI1YFA6zvN1ymtrO4WrrRrmzA'
 //          openid: loadOpenId()
         }
 //        console.log(data)
         this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
           if (res.data.code === 200) {
 //            刷新页面
             window.location.reload()
             alert(res.data.data)
             this.replyShow = false
           } else {
             // alert('回复发送失败')
           }
         })*/
      },
      //图片预览
      preview(index) {
        wx.previewImage({
          current: this.list.img[index], // 当前显示图片的http链接
          urls: this.list.img // 需要预览的图片http链接列表
        })
      }
    }
  }
</script>
